<template>
  <div class="main">
    <div class="edit">
      <tinymce-editor
        :value="content"
        :key="editHeight"
        :height="editHeight"
        @input="handleChange"
      ></tinymce-editor>
    </div>
  </div>
</template>

<script>
import TinymceEditor from '@/components/Editor'

export default {
  name: 'editor-index',
  components: {TinymceEditor},
  data() {
    return {
      content: '',
      editHeight: document.documentElement.clientHeight - 200
    }
  },
  mounted() {
    window.addEventListener("resize", this.watchWindowSize)
  },
  methods: {
    handleChange(content) {
      this.content = content
    },
    watchWindowSize() {
      this.editHeight =  document.documentElement.clientHeight - 200
    },
  },
}
</script>

<style scoped lang="scss">
.main {
  width: calc(100%);
  .edit {
    margin-top: 40px;
    width: calc(100% - 310px);
  }
}
</style>